<!--  族库管理 -->
<template>
  <div>
    <div class="flex">
      <div class="flex-left">
        <div class="navigationBar">
          <label>族目录</label>
        </div>
        <div class="flex-tree">
          <el-tree
            ref="tree"
            :data="data"
            node-key="Id"
            @node-click="handleNodeClick"
            :highlight-current="true"
          >
          </el-tree>
        </div>
      </div>
      <div class="flex-right">
        <navigation-bar>
          <div class="searchContent">
            <custom-button
              type="custom"
              title="挂接"
              icon="el-icon-s-flag"
              @customClick="showBqSelect"
            ></custom-button>
          </div>
        </navigation-bar>
        <div class="gjw-list">
          <tableHeightIndex
            :dataSource="dataSource"
            :tableColumns="tableColumns"
            :btnList="btnList"
            @deleteRow="deleteRow"
            btnListWidth="80"
            selection
            :height="secondTableHeight"
            @handleSelectionChange="handleSelectionChange"
          ></tableHeightIndex>
        </div>
      </div>
    </div>

    <div v-if="dialogBqShow">
      <custom-dialog
        :title="dialogTitle"
        size="large"
        @dialogClose="dialogBqClose"
      >
        <div class="singleTable">
          <div class="select">
            <div class="item" v-for="item in yzzdSelect" v-bind:key="item.Id">
              {{ item.TableName }}
            </div>
          </div>
          <div class="selectMain">
            <div class="selectLeft">
              <div class="selectLeftWrapper">
                <div
                  :class="
                    tableIndex == item.Id ? 'hover tree-item' : 'tree-item'
                  "
                  v-for="item in tableList"
                  v-bind:key="item.Id"
                  @click="tableClick(item)"
                >
                  {{ item.FolderName }}

                  <i
                    class="el-icon-delete delete"
                    @click="deleteFolder(item)"
                  ></i>
                  <i class="el-icon-edit edit" @click="editFolder(item)"></i>
                </div>
              </div>
            </div>
            <div class="selectRight">
              <singleTable
                :dataSource="zsxDataSource"
                :tableColumns="zsxTableColumns"
                height="500px"
                :selectItems="yzzdSelect"
                @singleHandleSelectionChange="singleHandleSelectionChange"
              ></singleTable>
            </div>
          </div>
        </div>
        <div class="singleBtn">
          <el-button
            size="small"
            type="primary"
            style="margin-right: 10px; color: #fff"
            @click="singleBtnClick"
          >
            <i class="el-icon-check"></i> 勾选确定
          </el-button>
        </div>
      </custom-dialog>
    </div>

    <div v-if="showloading">
      <loadingMask></loadingMask>
    </div>
  </div>
</template>

<script>
import { presetFieldsForm } from "@/assets/form/managementCenter/expandManage/presetFieldsForm";
import { zkForm } from "@/assets/form/managementCenter/zkForm";
import customDialog from "@/components/customComponents/customDialog";
import customButton from "@/components/customComponents/customForm/customButton";
import navigationBar from "@/components/customComponents/managementCenter/navigationBar";
import { AjaxCommon } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
import { Utility } from "@/libs/utility";
import singleTable from "@/components/customComponents/customeTable/singleTable.vue";
import tableHeightIndex from "@/components/customComponents/customeTable/tableHeightIndex.vue";
import loadingMask from "@/components/customComponents/loading";
export default {
  components: {
    navigationBar,
    customButton,
    customDialog,
    singleTable,
    tableHeightIndex,
    loadingMask,
  },
  data() {
    return {
      showloading: true,
      tableList: [],
      yzzdSelect: [],
      zsxDataSource: [],
      zsxTableColumns: [
        {
          prop: "TableName",
          label: "标准属性表名称",
        },
        {
          prop: "description",
          label: "描述",
        },
      ],
      zsxPageSize: 20,
      zsxPageCount: 100,
      zsxPageNo: 1,
      zsxSelectItem: [],
      secondTableHeight: document.body.clientHeight - 173,
      FileName: "",
      dialogBqSelectShow: false,
      dialogBqShow: false,
      typeValue: 0,
      activeCollapse: ["1"],
      activeName: "first",
      imgIndex: 0,
      imgList: [],
      hasIsSizes: true,
      count: 2,
      size: 20,
      current: 1,
      listData: [],
      curHeight: 100,
      folderData: null,
      fatherFolderId: "0",
      dialogFolderTitle: "新增目录",
      formConfigFolder: zkForm,
      typeFolder: "add",
      dialogFolderShow: false,
      data: [],
      tableIndex: "",
      tableName: "",
      sxmlId: "",
      selectItem: [],
      username: "",
      // table 相关参数  begin
      dataSource: [],
      tableColumns: [
        {
          prop: "TableName",
          label: "族标准属性名称",
        },
        {
          prop: "description",
          label: "描述",
        },
      ],
      btnList: ["delete"],
      // 弹窗是否显示
      dialogShow: false,
      // 弹窗标题 (新增修改不同)
      dialogTitle: "选择族标准属性",

      // form的配置信息
      formConfig: presetFieldsForm,
      type: "add",
      propertys: [],
      propertysValue: [],
    };
  },
  methods: {
    tableClick(item) {
      console.log(item, "item......");
      this.sxmlId = item.Id;
      this.initRightTable();
    },
    initRightTable() {
      // 差个搜索功能
      let self = this;
      AjaxCommon(`/api/table?tableType=2&key=${this.sxmlId}`, "get", null).then(
        (res) => {
          if (res.data.status == 200) {
            if (res.data.response) {
              self.zsxDataSource = res.data.response;
              // 初始化赋值
            } else {
              self.zsxDataSource = [];
            }
            self.yzzdFixedSelect = [];
            self.yzzdSelect = [];
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        }
      );
    },
    singleHandleSelectionChange(e) {
      // 保留一个原始值和一个动态的值，动态的值，默认为原始值
      // 这里要去确定是新增的，还是删除的，同时要保留最开始的，取消的时候或者重新打开的时候要还原
      console.log(this.yzzdSelect, "最终值111.................");
      var yzzdFixedSelect = JSON.parse(JSON.stringify(this.yzzdSelect));
      var curSelect = yzzdFixedSelect.filter((b) => b.FolderID == this.yzId);
      if (e && e.length > 0) {
        if (curSelect && curSelect.length > 0) {
          // 固定表存在,而选择的值不存在了，如果id不存在了就删除
          curSelect.forEach((t) => {
            if (e.find((b) => b.Id == t.Id) == null) {
              Utility.removeByAttr(yzzdFixedSelect, "Id", t.Id);
            }
          });
          // 选择的值存在，而固定表不存在，这时候应该新增
          e.forEach((t) => {
            if (curSelect.find((b) => b.Id == t.Id) == null) {
              yzzdFixedSelect.push(t);
            }
          });
        } else {
          // 当前固定表不存在，全部新增
          e.forEach((t) => {
            yzzdFixedSelect.push(t);
          });
        }
      } else {
        if (curSelect && curSelect.length > 0) {
          curSelect.forEach((t) => {
            Utility.removeByAttr(yzzdFixedSelect, "Id", t.Id);
          });
        }
      }
      console.log(yzzdFixedSelect, "最终值2.................");
      this.yzzdSelect = yzzdFixedSelect;
    },
    deleteRow(d) {
      const id = d.data.Id;
      const FolderId = this.tableIndex;
      let self = this;
      // StandardTableId  标准属性表ID
      AjaxCommon(
        `/api/TableFolderRelation/Delete?FolderID=${FolderId}&StandardTbID=${id}`,
        "delete",
        {
          optReason: "",
        }
      ).then((res) => {
        if (res.data.status == 200) {
          PopupCommon.notify("success", "删除成功");
          self.initPage();
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    singleBtnClick() {
      if (this.yzzdSelect.length < 1) {
        PopupCommon.notify("info", "请选择一个族标准属性");
        return;
      }
      var isTrue = true;
      var msg = "";
      this.yzzdSelect.forEach((t) => {
        AjaxCommon(
          `/api/TableFolderRelation?StandardTableId=${t.Id}&FamilyFolderID=${this.tableIndex}`,
          "post",
          {}
        ).then((res) => {
          if (res.data.status != 200) {
            isTrue = false;
            msg = res.data.msg;
          }
        });
      });
      setTimeout(() => {
        if (isTrue) {
          PopupCommon.notify("success", "挂接成功");
          this.initPage();
        } else {
          PopupCommon.notify("error", msg);
        }
        this.dialogBqShow = false;
      }, 500);
    },
    showBqSelect() {
      let self = this;
      var id = this.tableIndex;
      if (id == "") {
        PopupCommon.notify("info", "请先选择左侧的族目录");
        return;
      }
      self.dialogBqShow = true;
    },
    dialogBqClose() {
      this.dialogBqShow = false;
    },
    handleSelectionChange(d) {
      this.selectItem = d;
      console.log(d);
    },
    zsxHandleSelectionChange(d) {
      this.zsxSelectItem = d;
    },
    getHeight() {
      this.curHeight = window.innerHeight - 146;
    },
    handleNodeClick(data) {
      console.log(data, "点击..............");
      this.tableIndex = data.Id;
      this.tableName = data.FolderName;
      this.dialogTitle = `选择族标准属性【${data.FolderName}】`;
      this.initPage();
    },
    append(data) {
      console.log(data, "data.................");
      this.folderData = data;
      this.fatherFolderId = data.id;
      this.typeFolder = "add";
      this.dialogFolderTitle = "新增目录";
      this.dialogFolderShow = true;
    },
    renderContent(h, { node, data }) {
      return (
        <span style="flex: 1;display: flex;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 8px;">
          <span>{node.label}</span>
          <span class="tree-btn">
            <span style="color: #409EFF;padding: 2px;border-radius: 2px;margin-right: 4px;">
              <i class="el-icon-plus" on-click={() => this.append(data)}></i>
            </span>
          </span>
        </span>
      );
    },

    showFolder() {
      this.fatherFolderId = "0";
      this.typeFolder = "add";
      this.dialogFolderTitle = "新增目录";
      this.dialogFolderShow = true;
    },

    dialogClose() {
      this.dialogShow = false;
    },

    // 分页点击事件
    pageChange(p) {
      this.pageNo = p;
      this.initPage();
    },
    zsxPageChange(p) {
      this.zsxPageNo = p;
    },
    // 初始化事件
    async initPage() {
      let self = this;
      var id = this.tableIndex;
      AjaxCommon(`/api/TableFolderRelation?id=${id}`, "get", null).then(
        (res) => {
          if (res.data.status == 200) {
            var data = res.data.response;
            self.dataSource = data;
            self.pageCount = res.data.response.dataCount;
          } else {
            PopupCommon.notify("error", res.data.msg);
          }
        }
      );
    },
    initLeftFolder(callback) {
      this.showloading = true;
      let self = this;
      self.data = [];
      AjaxCommon(
        "/api/familyfolder/GetFullFolder?FolderType=1",
        "get",
        null
      ).then((res) => {
        console.log(res, "res.............");
        if (res.data.status == 200) {
          let treeDataList = [];
          Utility.createTreeTableData(res.data.response, treeDataList);
          console.log(treeDataList, "treeDataList.....");
          self.data = treeDataList;
          setTimeout(() => {
            if (treeDataList && treeDataList.length > 0) {
              console.log("self...............................");
              self.tableIndex = treeDataList[0].Id;
              self.tableName = treeDataList[0].FolderName;
              self.$nextTick(() => {
                self.$refs.tree.setCurrentKey(treeDataList[0].Id);
              });
              callback && callback();
            } else {
              self.tableIndex = "";
              self.tableName = "";
            }
            self.showloading = false;
          }, 1000);
        } else {
          PopupCommon.notify("error", res.data.msg);
          self.showloading = false;
        }
      });
    },

    initZml() {
      let self = this;
      AjaxCommon(`/api/folder?folderType=3`, "get", null).then((res) => {
        if (res.data.status == 200) {
          var data = res.data.response;
          self.tableList = data;
        } else {
          self.tableList = [];
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
      this.initZml();
      this.initLeftFolder(() => {
        this.initPage();
      });
    });

    /*窗口自适应，关键代码*/
    window.onresize = () => {
      this.getHeight();
    };
  },
};
</script>

<style scoped>
.flex {
  display: flex;
}

.flex .flex-left {
  width: 350px;
  margin-right: 10px;
}

.flex .flex-right {
  flex: 1;
}

.flex .flex-left .navigationBar {
  height: 36px;
  line-height: 36px;
  background-color: #fff;
  margin-top: 10px;
}

.flex .flex-left .flex-tree {
  background-color: #fff;
  margin-top: 10px;
  height: calc(100vh - 168px);
  overflow-y: auto;
  padding: 10px;
}

.tree-item {
  height: 32px;
  line-height: 32px;
  margin: 5px 10px;
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
}
.tree-item:hover {
  background-color: #e4f1fe;
}
.hover {
  background-color: #e4f1fe;
}

.flex .flex-left .navigationBar label {
  text-align: left;
  font-size: 16px;
  color: #333;
  margin-left: 10px;
}

.flex .flex-left .navigationBar span {
  float: right;
  margin-right: 10px;
  color: #333;
  cursor: pointer;
}

.singleTable {
  margin-bottom: 20px;
}
.singleBtn {
  position: absolute;
  bottom: 8px;
  right: 9px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.tree-btn {
  color: red;
}

.main {
  margin: 10px 0;
}
.img-list {
  height: 480px;
  width: 100%;
  position: relative;
  text-align: center;
}
.img-list-left-arrow {
  font-size: 12px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f5f5fa;
  top: 230px;
  left: 0;
  z-index: 1;
  cursor: pointer;
}
.img-list-left-arrow i,
.img-list-right-arrow i {
  font-size: 26px;
  margin-top: 7px;
  cursor: pointer;
}
.img-list-right-arrow {
  font-size: 12px;
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f5f5fa;
  top: 230px;
  right: 0;
  z-index: 1;
  cursor: pointer;
}
.img-list-left-img {
  font-size: 12px;
}
.img-list-li {
  text-align: center;
  padding-bottom: 10px;
}
.img-list-li ul {
  display: inline-block;
  list-style: none;
}
.img-list-li ul li {
  font-size: 12px;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background-color: #e1e1eb;
  float: left;
  margin-right: 20px;
}
.img-list-li ul li.hover {
  background-color: #8992a0 !important;
}
.detail-name {
  font-weight: bold;
  color: #333;
  font-size: 16px;
  margin-bottom: 8px;
}
.detail-update {
  color: #666;
  font-size: 16px;
}
.detail-wrapper {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
  width: 96%;
  padding: 10px;
  height: 580px;
}
.detail-wrapper-type {
  height: 40px;
  line-height: 40px;
  border-bottom: 2px solid #e4e7ed;
}
.collapseType {
  margin-top: 10px;
  overflow-y: auto;
  height: 535px;
}
.collapseType-item {
  padding: 0px 10px;
  display: flex;
}
.collapseType-item .collapseType-item-left {
  width: 50%;
  text-align: right;
  font-size: 16px;
  line-height: 32px;
  color: #333;
  padding-right: 10px;
}

.collapseType-item .collapseType-item-right {
  width: 50%;
  text-align: left;
  font-size: 13px;
  line-height: 32px;
  color: #666;
}
.typeItem > div {
  background-color: #f5f5fa;
}

.list {
  margin: 10px 0;
  padding: 10px;
  background-color: #fff;
}
.list-title {
  display: flex;
}
.list-title .list-title-left {
  width: 400px;
  text-align: left;
  height: 32px;
  line-height: 32px;
}
.list-title .list-title-left .searchContent {
  display: inline-block;
  margin-left: 30px;
}
.list-title .list-title-left .el-image {
  display: block;
  float: left;
  margin-top: 4px;
  margin-right: 6px;
}
.list-title .list-title-right {
  flex: 1;
  text-align: right;
}
.gjw-list {
  height: calc(100vh - 168px);
  background: #fff;
  margin-top: 10px;
  padding: 10px;
}
.gjw-list .gjw-list-list {
  height: calc(100vh - 222px);
  overflow-y: auto;
  padding-top: 0px;
  margin-bottom: 10px;
}
.gjw-list .gjw-list-list .gjw-list-item {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 10px;
  padding-top: 3px;
}
.gjw-list .gjw-list-list .gjw-list-item .item {
  margin-right: 10px;
  width: calc((100% - 50px) / 5);
  height: 240px;
  border-radius: 4px;
  background: #fff;
  margin-bottom: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
}
.gjw-list .gjw-list-list .gjw-list-item .item .item-button {
  text-align: center;
  height: 32px;
  width: 100%;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-row {
  border-bottom: 1px solid #e0e0e0;
  height: 28px;
  line-height: 28px;
  color: #666;
  font-size: 14px;
  background-color: #f5f5fa;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-title {
  font-size: 14px;
  text-align: center;
  color: #333;
  line-height: 40px;
  height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  padding: 0 10px;
}

.gjw-list .gjw-list-list .gjw-list-item .item .item-img {
  height: 120px;
  margin: 10px;
  text-align: center;
  cursor: pointer;
}
.gjw-list .gjw-list-page {
  background-color: #e0e0e0;
  height: 40px;
  padding-top: 10px;
  text-align: right;
}
.tab-wrapper {
  display: flex; /* flex布局 */
  justify-content: flex-start; /* 左对齐 */
  flex-wrap: wrap; /* 换行 */
  padding: 20px;
  background-color: #fff;
}

.tab-item {
  margin-right: 20px; /* 每个元素右间距设置为20px */
  width: calc((100% - 60px) / 4);
  height: 110px;
  border-radius: 4px;
}
.l-img {
  width: 50%;
  float: left;
}
.l-border {
  border: 1px solid #fff;
  width: 66px;
  height: 54px;
  text-align: center;
  float: right;
  margin-top: 27px;
  margin-right: 20px;
  border-radius: 4px;
  padding-top: 4px;
}
.r-text {
  float: right;
  width: 50%;
}
.r-text .tab {
  font-size: 26px;
  color: #fff;
  margin-top: 25px;
}
.r-text .title {
  font-size: 18px;
  color: #fff;
  margin-top: 6px;
}

.one {
  background-color: #a6a0f5;
}
.two {
  background-color: #58b5ff;
}
.three {
  background-color: #4ec8d1;
}
.four {
  background-color: #fbac69;
}
.tab-item:nth-of-type(4n + 0) {
  margin-right: 0;
}
.noData {
  margin-top: 100px;
  text-align: center;
  color: #999;
}

.tree-item {
  height: 32px;
  line-height: 32px;
  margin: 5px 10px;
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
}
.tree-item:hover {
  background-color: #e4f1fe;
}
.flex-tree .hover {
  background-color: #e4f1fe;
}

.singleTable {
  margin-bottom: 20px;
}
.singleBtn {
  position: absolute;
  bottom: 8px;
  right: 9px;
}

.select {
  font-size: 14px;
  line-height: 30px;
  padding: 5px 10px;
}

.select .item {
  display: inline-block;
  padding: 0px 10px;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-right: 10px;
  margin-bottom: 10px;
}

.selectMain {
  height: 515px;
}
.selectMain .selectLeft {
  width: 35%;
  float: left;
}

.selectMain .selectLeft .selectLeftWrapper {
  margin: 10px;
  border: 1px solid #ebeef5;
  padding: 10px;
  height: 478px;
  overflow-y: auto;
}

.selectMain .selectRight {
  width: 65%;
  float: left;
}

.delete {
  color: red;
  float: right;
  margin-top: 9px;
  cursor: pointer;
}
.edit {
  color: blue;
  float: right;
  margin-top: 9px;
  cursor: pointer;
  margin-right: 10px;
}
</style>
